// 轮播图逻辑代码

// 0. 获取元素
const banner = document.querySelector('.banner') // 外层盒子
const imgBox = banner.querySelector('.imgBox') // ul
const pointBox = banner.querySelector('.pointBox') // ol

// 0. 准备变量
const banner_width = banner.clientWidth;
// 可视化窗口的宽度
// clientWidth: 获取元素的可视化宽度
let index = 1  // 代表当前显示的图片
let timer = 0  // 代表定时器
let flag = true // 开关  


// 第一部分: 准备工作(调整图片, 设置焦点)
// 5123451
// 1. 复制元素
copyEle()
function copyEle() {
  // 1-1. 复制元素
  const first = imgBox.firstElementChild.cloneNode(true)
  const last = imgBox.lastElementChild.cloneNode(true)

  // 1-2. 插入元素
  imgBox.appendChild(first)
  imgBox.insertBefore(last, imgBox.firstElementChild);

  // 1-3. 调整宽度  由5变成了7张
  imgBox.style.width = imgBox.children.length * 100 + '%'

  // 1-4. 调整位置
  imgBox.style.left = -index * banner_width + 'px'
}

// 2. 设置焦点
setPoint()
function setPoint() {
  // 2-1. 拿到要设置的数量
  const pointNum = imgBox.children.length - 2

  // 2-2. 开始设置
  for (let i = 0; i < pointNum; i++) {
    const li = document.createElement('li')

    li.classList.add('item');

    if (i === 0) li.classList.add('active')

    li.dataset.point = i;// 为了方便输入的时候
    //知道你是第几个焦点

    pointBox.appendChild(li)
  }

  // 2-3. 调整宽度
  pointBox.style.width = imgBox.children.length * (20 + 10) + 'px'
}


// 第二部分: 轮播图逻辑(自动轮播, 点击事件)
// 3. 自动轮播
autoPlay()
function autoPlay() {
  timer = setInterval(() => {
    index++
    move(imgBox, { left: -index * banner_width }, moveEnd)
  }, 2000)
}

// 4. 运动结束
function moveEnd() {
  // 4-1. 最后一张
  if (index === imgBox.children.length - 1) {
    index = 1
    imgBox.style.left = -index * banner_width + 'px'
  }

  // 4-2. 第一张
  if (index === 0) {
    index = imgBox.children.length - 2
    imgBox.style.left = -index * banner_width + 'px'
  }

  // 4-3. 调整焦点
  for (let i = 0; i < pointBox.children.length; i++) {
    pointBox.children[i].classList.remove('active')
  }
  pointBox.children[index - 1].classList.add('active')

  flag = true;

}

// 5. 移入移出
overOut()
function overOut() {
  banner.addEventListener('mouseover', () => clearInterval(timer))
  banner.addEventListener('mouseout', () => autoPlay())
}

// 6. 点击事件
bindEvent()
function bindEvent() {
  banner.onclick = function (e) {

    if (e.target.className === 'left') {
      if (flag === false) return
      flag = false
      index--
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }

    if (e.target.className === 'right') {
      if (flag === false) return
      flag = false
      index++
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }

    if (e.target.className === 'item') {
      if (flag === false) return
      flag = false
      index = e.target.dataset.point - 0 + 1
      move(imgBox, { left: -index * banner_width }, moveEnd)
    }
  }
}


// 第三部分: 解决问题(离开页面, 快速点击)
changeTab()
function changeTab() {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') clearInterval(timer)
    if (document.visibilityState === 'visible') autoPlay()
  })
}
